<template>
	<view class="">
		<!-- 上传压缩图片 -->
		<button class="btn" size="mini" type="primary" @click="chooseImage">上传</button>
		<view class="tips">1、当图片大小 小于 100k 直接返回</view>
		<view class="tips">2、图片压缩  当图片的最大宽或高 超过了 设置的 800 就会走压缩方法 </view>
		<!-- <button type="default" @click="chooseImage">上传</button> -->
		<view class="img-group" v-for="(item,index) in imgUrls">
			<view>
				<view class="img">
					<image :src="item.oldImg" mode="aspectFill"></image>
				</view>
				<view class="txt">压缩前</view>
			</view>
			<view>
				<view class="img">
					<image :src="item.newImg" mode="aspectFill"></image>
				</view>
				<view class="txt">压缩后</view>
			</view>
		</view>
		<compression ref="compression" />
	</view>
</template>

<script>
	import compression from '@/components/compress.vue'
	export default {
		components:{ compression },
		data(){
			return {
				imgUrls: [],
				canvasSize:{
					width: '',
					height: ''
				}
			}
		},
		methods:{
			// 上传图片
			chooseImage(){
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {
						const newImg = await this.$refs.compression.compress(res)
						uni.getImageInfo({
							src: newImg,
							success: (image) => {
								console.log(image,'获取图片信息')
							}
						})
						this.imgUrls.push({
							oldImg: res.tempFilePaths[0],
							newImg
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn{margin: 25rpx 25rpx 0;}
	.tips{padding: 0 25rpx;color: #999;font-size: 30rpx;margin-top: 10rpx;}
	.img-group{display: flex;padding: 20rpx;
		&>view{margin-right: 20rpx;
			.img{width: 200rpx;height: 200rpx;border-radius: 12rpx;overflow: hidden;}
			.txt{line-height: 60rpx;font-size: 28rpx;color: #666;text-align: center;}
		}
	}
</style>
